<template>
	<view>
		<view class="flex">
            <u-icon name="minus" :color="numDefault == 0 ? '#b3b3b3':'#000000'" size="22" @click="reduPercent"></u-icon>
			<view class="text font-16 text-center color-b">{{ numDefault }}%</view>
            <u-icon name="plus" :color="numDefault == 100 ?  '#b3b3b3':'#000000'" size="22" @click="addPercent"></u-icon>
		</view>
	</view>
</template>

<script>
export default {
	name: 'numberPercent',
    props:{
        percentNum: Number,
        maxPercent: Number,
        percentChooese: Number,
    },
    watch:{
        percentNum:{
            handler(val){
                if(val || val == 0){
                    this.numDefault = val
                }
            },
            deep:true,
            immediate:true,
        },
    },
    data(){
        return {
            numDefault: 0,
            noAdd: false
        }
    },
    methods:{
        reduPercent(){
            if(this.numDefault == 0){
                return
            }
            if(this.numDefault == 100){
                this.numDefault = 20
            }else if(this.numDefault == 20){
                this.numDefault = 15
            }else if(this.numDefault == 15){
                this.numDefault = 10
            }else if(this.numDefault == 10){
                this.numDefault = 5
            }else if(this.numDefault == 5){
                this.numDefault = 0
            }
            this.$emit('numChange', this.numDefault)
        },
        addPercent(){
            if(this.numDefault == 100){
                this.$msg('最大抵扣 100% !')
                return
            }
            if(this.numDefault == 0 && this.maxPercent > this.numDefault && this.maxPercent > 5){
                this.numDefault = 5
            }else if(this.numDefault == 5 && this.maxPercent > this.numDefault && this.maxPercent > 10){
                this.numDefault = 10
            }else if(this.numDefault == 10 && this.maxPercent > this.numDefault && this.maxPercent > 15){
                this.numDefault = 15
            }else if(this.numDefault == 15 && this.maxPercent > this.numDefault && this.maxPercent > 20){
                this.numDefault = 20
            }else if(this.numDefault == 20 && this.maxPercent >= 100){
                this.numDefault = 100
            }else{
                this.$msg('资产不足 !')
            }
            this.$emit('numChange', this.numDefault)
        },
    }
}
</script>

<style lang="scss" scoped>
.empty-image {
	margin: 0 auto;
}
.text{
    min-width: 100rpx;
    line-height: 40rpx;
    margin-top: 1rpx;
    background-color: #f3f3f3;
}
</style>
